<template>
  <el-container class="sjmlxq-content">
    <el-header class="header-slxq-detail">
      <div class="info">
        <div class="circlebg">
          <el-icon color="#2263BF"><List /></el-icon>
        </div>
        <div class="infotext">
          <p class="ch">{{ nameInfo.name }}</p>
          <p class="en">表名称：{{ nameInfo.nameEn }}</p>
        </div>
      </div>
      <div class="tab-select">
        <span
          class="btn"
          :class="{ active: currentTab == 1 }"
          @click="selectTab(1)"
          >信息概览</span
        >
        <span
          class="btn"
          :class="{ active: currentTab == 2 }"
          @click="selectTab(2)"
          >字段信息</span
        >
        <span
          class="btn"
          :class="{ active: currentTab == 3 }"
          @click="selectTab(3)"
          >数据明细</span
        >
      </div>
      <div class="panel" v-if="currentTab == 1 || currentTab == 2">
        <div class="panel-btn" v-if="!isEdit" @click="changEdit(1)">
          <img src="../../../assets/images/edit.png" alt="" />
          <span>编 辑</span>
        </div>
        <template v-else>
          <div class="panel-btn" @click="changEdit(2)">
            <img src="../../../assets/images/save.png" alt="" />
            <span>保 存</span>
          </div>
          <div class="panel-btn" @click="changEdit(3)">
            <img src="../../../assets/images/cancel.png" alt="" />
            <span>取 消</span>
          </div>
        </template>
      </div>
      <div class="panel" v-if="currentTab == 3">
        <div class="panel-btn" @click="openSearch(2)">
          <img
            v-if="issearch"
            src="../../../assets/images/opensye.png"
            alt=""
          />
          <img v-else src="../../../assets/images/eye.png" alt="" />
          <span>{{ issearch ? "显示筛选条件" : "隐藏筛选条件" }}</span>
        </div>
        <div class="panel-btn" @click="addData()">
          <img src="../../../assets/images/add.png" alt="" />
          <span>追加数据</span>
        </div>
      </div>
    </el-header>
    <el-main class="detail-main">
      <BaseInfo
        ref="baseInforef"
        :isEdit="isEdit"
        @baseInfo="setBaseInfo"
        v-if="currentTab == 1"
      />
      <FieldInfo
        ref="fieldInforef"
        @totalValue="totalValue"
        :isEdit="isEdit"
        v-if="currentTab == 2"
      />
      <DataDetail
        ref="dataInforef"
        :issearch="issearch"
        v-if="currentTab == 3"
      />
    </el-main>
  </el-container>
</template>

<script setup>
import BaseInfo from "./component/baseinfo.vue";
import FieldInfo from "./component/fieldinfo.vue";
import DataDetail from "./component/datadetail.vue";
import { ref } from "vue";
let currentTab = ref(1);
const selectTab = (index) => {
  currentTab.value = index;
  isEdit.value = false;
};

let route = useRoute();
let baseInfo = reactive(null);
let nameInfo = reactive({
  name: "",
  nameEn: "",
});

const setBaseInfo = (data) => {
  nameInfo.name = data.objectNameChn;
  nameInfo.nameEn = data.objectName;
};

onMounted(() => {
  nameInfo.name = route.query.name;
  nameInfo.nameEn = route.query.nameEn;
});

let baseInforef = ref(null);
let fieldInforef = ref(null);
let isEdit = ref(false);

const changEdit = (value) => {
  if (value == 1) {
  }
  if (value == 2) {
    if (currentTab.value == 1) {
      baseInforef.value.saveInfo();
    }
    if (currentTab.value == 2) {
      fieldInforef.value.saveInfo();
    }
  }

  if (value == 3) {
    if (currentTab.value == 1) {
      baseInforef.value.cancelInfo();
    }
    if (currentTab.value == 2) {
      fieldInforef.value.cancelInfo();
    }
  }

  isEdit.value = !isEdit.value;
};

let fiedlength = ref(0);

const totalValue = (value) => {
  fiedlength.value = value;
};

let issearch = ref(true);

const openSearch = (value) => {
  issearch.value = !issearch.value;
};

let dataInforef = ref();
const addData = () => {
  dataInforef.value.changeVisable();
};
</script>



<style lang="scss" scoped>
.sjmlxq-content {
  width: 100%;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
  border-radius: 12px;
  padding: 50px 81px 0 62px;
  position: relative;
  .header-slxq-detail {
    height: auto;
    border-bottom: 1px solid rgba(151, 151, 151, 0.3);
    padding-bottom: 20px;
    position: relative;
    .info {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 26px;
      .circlebg {
        width: 50px;
        height: 50px;
        text-align: center;
        border-radius: 50%;
        line-height: 55px;
        background: rgba(142, 191, 255, 0.32);
        font-size: 24px;
        margin-right: 34px;
      }
      .infotext {
        .ch {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #333333;
          line-height: 22px;
          margin-bottom: 12px;
        }
        .en {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 12px;
          color: #666666;
          line-height: 17px;
        }
      }
    }
  }

  .detail-main {
    padding: 20px 0 20px 0;
    // border: 1px solid red;
  }
}
</style>